<template>
    <div class="app">
        <navbar class="navbarb">
            <navbar-item type="back"></navbar-item>   
            <navbar-item type="title">
                <div class="navbartitcont" @click="minibarRightButtonClick">
                    <text class="headtext">{{curText}}</text>
                    <icon class="topnavIcon" :eeui="{content:'ios-arrow-down',fontSize:50}"></icon>
                </div>
                
            </navbar-item>
            <navbar-item type="right" @click="jumpenterpage">
                <image style="width:40px;height:40px;margin-right:30;" src="../../assets/images/shareicon.png"></image>
            </navbar-item>
        </navbar>
        <!-- 气泡下拉 -->
        <wxc-popover ref="wxc-popover"
                 :buttons="btns"
                 :position="popoverPosition"
                 :arrowPosition="popoverArrowPosition"
                 @wxcPopoverButtonClicked="popoverButtonClicked"></wxc-popover>

        <div class="content">
            <div class="timetabr">
                <text class="timeItem  borderR">日</text>
                <text class="timeItem timeItemcur borderR">周</text>
                <text class="timeItem borderR">月</text>
                <text class="timeItem">年</text>
            </div>

            <div class="map">

                <WEcharts class="echarts" :options="options"></WEcharts>
            </div>
            <div class="onevaluelist">

                <div class="valueList">
                    <div class="valueitem">
                        <div class="iconleft">
                            <image src="../../assets/images/timeicon.png" style="width:38;height:38;"></image>
                            <text class="valueText">时长</text>
                        </div>
                        <text class="value">00:27:15</text>
                    </div>
                    <div class="valueitem">
                        <div class="iconleft">
                            <image src="../../assets/images/disicon.png" style="width:38;height:38;"></image>
                            <text class="valueText">距离</text>
                        </div>
                        <div class="valuebox">
                            <text class="value">25.43</text>
                            <text class="valueP">公里</text>
                        </div>
                        
                    </div>
                </div>
                <div class="valueList">
                    <div class="valueitem">
                        <div class="iconleft">
                            <image src="../../assets/images/timesicon.png" style="width:38;height:38;"></image>
                            <text class="valueText">跑步次数</text>
                        </div>
                        <div class="valuebox">
                            <text class="value">7</text>
                            <text class="valueP">次</text>
                        </div>
                    </div>
                    <div class="valueitem">
                        <div class="iconleft">
                            <image src="../../assets/images/klicon.png" style="width:38;height:38;"></image>
                            <text class="valueText">卡路里</text>
                        </div>
                        <div class="valuebox">
                            <text class="value">27</text>
                            <text class="valueP">千卡</text>
                        </div>
                        
                    </div>
                </div>
                            
            </div>
            <div class="timesbox">
                <div class="timesList">
                    <div class="timeslistBox">
                        <text class="timestit">1月26日</text>
                        <div class="times">
                            <div class="timesleft">
                                <div class="timesiconbox">
                                    <image class="timesshan" src="../../assets/images/shanicon.png" style="width:39;height:40"></image>
                                    <image class="sh" src="../../assets/images/shicon.png" style="width:28;height:28"></image>
                                    <image v-if="false" class="error" src="../../assets/images/erricon.png" style="width:28;height:28"></image>
                                </div>
                                <text class="timestext">体育成绩跑</text>
                                <text class="timestext">00:11:00</text>
                            </div>
                            <div class="valuebox">
                                <text class="value">25.43</text>
                                <text class="valueP">公里</text>
                                <icon class="iconback" :eeui="{content:'ios-arrow-forward',fontSize:50}"></icon>
                            </div>
                        </div>
                        <div class="times">
                            <div class="timesleft">
                                <div class="timesiconbox">
                                    <image class="timesshan" src="../../assets/images/shanicon.png" style="width:39;height:40"></image>
                                    <image v-if="false" class="sh" src="../../assets/images/shicon.png" style="width:28;height:28"></image>
                                    <image  class="error" src="../../assets/images/erricon.png" style="width:28;height:28"></image>
                                </div>
                                <text class="timestext">体育成绩跑</text>
                                <text class="timestext">00:11:00</text>
                            </div>
                            <div class="valuebox">
                                <text class="value">25.43</text>
                                <text class="valueP">公里</text>
                                <icon class="iconback" :eeui="{content:'ios-arrow-forward',fontSize:50}"></icon>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            
        </div>
        
    </div>
</template>
<script>
import WEcharts from "../../components/WEcharts/index";
import { WxcMinibar, WxcPopover} from 'weex-ui';
export default {
    components: { WEcharts,WxcMinibar, WxcPopover },
    data () {
        return {
            options:{
                    // legend:{
                    //     orient:"horizontal",
                    //     x:'right',
                    //     y:' center',
                    //     width:'100',
                    //     padding:[10, 30,0,0],
                    //     itemWidth:30,
                    //     textStyle:{
                    //         color:'#000',
                    //     },
                    // },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '0%',
                        right: '0%',
                        bottom: '3%',
                        top:'3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['1/26', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '跑步次数',
                            type: 'bar',
                            barWidth: '60%',
                            itemStyle: {
                                normal: {
                                    color: '#00C179'
                                }
                            },
                            data: [1, 4, 9, 8, 6, 2, 12]
                        }
                    ]
            },
            btns:[
                {
                text:'全部',
                key:'全部'
                },
                {
                text:'体育成绩跑',
                key:'体育成绩跑'
                },
                {
                text:'自由跑',
                key:'自由跑'
                },
            ],
            popoverPosition:{x:220,y:70},
            popoverArrowPosition:{pos:'top',x:115},
            curText:'全部'
        }
    },
    methods: {
        jumpenterpage(){
            eeui.openPage({
                    url: 'sharepage.js',
                    statusBarColor:'#1eb76e',
                    pageName:'分享',
                    animated:true,
                }, function(result) {
                    //......
                }); 
        },
        minibarRightButtonClick () {
            this.$refs['wxc-popover'].wxcPopoverShow();
        },
        popoverButtonClicked (obj) {
            //eeui.toast({ 'message': `key:${obj.key}, index:${obj.index}`, 'duration': 1 });
            this.curText = obj.key;
        }
        
    }
}
</script>
<style scoped>
.navbarb{
        width: 750px;
        height: 100px;
        background-color: #1eb76e;
    }
     .headtext {
        font-size: 43px;
        color: #ffffff;
    }
    .navbartitcont{
        flex-direction: row;
    }
    .topnavIcon{
        width: 60px;
        height: 50px;
        margin-left: 30;
        color: #ffffff;
    }
    .setIcon{
        width: 60;
        height: 60;
    }
    .content{
        width: 750;
    }
    .timetabr{
        flex-direction: row;
        border-style: solid;
        border-width: 2px;
        border-color: #575757;
        width: 690px;
        height: 56; 
        border-radius: 10px;
        margin-top: 33;
        margin-left: 30;
    }
    .borderR{
        border-right-color: #575757;
        border-right-style: solid;
        border-right-width: 2px;
    }
    .timeItem{
        width: 171;
        height: 56;
        text-align: center;
        line-height: 56;
    }
    .timeItemcur{
        background-color: #575757;
        color: #ffffff;
    }
    .map{
        width: 690;
        height: 400;
        margin-left: 30;
        margin-top: 30;
    }
    .echarts{
        width: 690;
        height: 400;
    }
    .valueList{
        flex-direction: row;
        height: 79;
        border-bottom-color: #dadada;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        justify-content: space-between;
        margin-left: 30;
        margin-right: 30;
    }
    .valueitem{
        flex-direction: row;
        height: 79;
        justify-content: space-between;
        align-items: center;
        width: 326;
    }
    .valueText{
        font-size: 27;
        color: #575757;
        margin-left: 18px;
    }
    .iconleft{
        flex-direction: row;
        height: 79;
        align-items: center;
    }
    .value{
        font-size: 32;
        color: #4e4e4e;
        font-weight: bold;
    }
    .onevaluelist{
        margin-top: 20;
    }
    .valuebox{
        flex-direction: row;
        align-items: center;
    }
    .valueP{
        font-size: 27px;
        color: #4E4E4E;
        margin-top: 5;
    }
    .timestit{
        font-size: 27;
        color: #575757;
        border-bottom-color: #DADADA;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        padding-bottom: 16;
        margin-left: 30;
        margin-right: 30;
        margin-top: 35;

    }
    .times{
        flex-direction: row;
        justify-content: space-between;
        margin-left: 30;
        margin-right: 30;
        height: 101;
        align-items: center;
        border-bottom-color: #DADADA;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    .timesleft{
        flex-direction: row;
        height: 101;
        align-items: center;
    }
    .timesiconbox{
        width: 50;
        height: 60;
        position: relative;
    }
    .timesshan{
        margin-top: 13;
    }
    .error{
       position: absolute;
        top: 0;
        right: 2; 
    }
    .sh{
        position: absolute;
        top: 0;
        right: 2;
    }
    .timestext{
        font-size: 27;
        color: #575757;
        margin-left: 34;
    }
    .iconback{
        width: 50;
        height: 50;
        color: #999;
    }
</style>